<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      图片上传
    </template>
    <el-upload
        v-model:file-list="fileList"
        :http-request="httpRequest"
        :on-preview="handlePictureCardPreview"
        list-type="picture-card"
        :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>

  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadProps, UploadUserFile,UploadRequestOptions } from 'element-plus'
import { getAvatarUpload } from "@/api/file";

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])
const httpRequest = async (options: UploadRequestOptions) => {
  const {file} = options
  getAvatarUpload({file}).then(res => {
    console.log(res)
  })
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}
</script>
